<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
request.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改信息-卓应商城</title>

	<link rel="stylesheet" href="/common/css/userinfo/base.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/global.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/header.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/home.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/user.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/bottomnav.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/footer.css" type="text/css">

	<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="/common/js/order/header.js"></script>
	<script type="text/javascript" src="/common/js/order/home.js"></script>
	
	<style type="text/css">
		#btn-submit{
			width:60px;
			height:30px;
			line-height:30px;
			font-family:"Microsoft YaHei";
			font-size:18px;
			display:inline-block;
			text-decoration:none;
			border:1px solid #d00000;
			border-radius:2px;
			background:#d00000;
			color:#fff;
			margin:0;
			text-align:center;
			cursor:pointer;
		}
	</style>
	
	<script>
		$(document).ready(function(){
			//隐藏手机号
			var phone = $("#old-phone-number").val();
			var newPhone = phone.substr(0,3)+'****'+phone.substr(7);
			$("#phone-number").val(newPhone);
			
			//隐藏身份证号码
			var id = $("#id-number").val();
			var newId = id.substr(0,4)+'**********'+id.substr(14);
			$("#id-number").val(newId);
			
			//修改用户名
			$("#change-username").click(function(){
				$("#change-username").removeAttr("href");
				$("#username").removeAttr("readonly");
				$("#username").removeClass("input-text-new");
				$("#change-username").addClass("hide");
				$(".username-msg").removeClass("hide");
				
				//ajax验证用户名唯一性
				$("#username").on("blur",function(){
					var username = $(this).val();
					var regex = /^[a-zA-Z0-9]{6,20}$/;
					//正则验证
					if(!regex.test(username)){
						$(".username-msg").text("用户名长度为6-20");
						$(".username-msg").removeClass("green");
						$(".username-msg").addClass("red");
						return;
					}
					
					//ajax请求
					$.post(
							"/user/verusername",
							{"username":username},
							function(data){
								if(data=="success"){
									$(".username-msg").text("用户名已存在");
									$(".username-msg").removeClass("green");
									$(".username-msg").addClass("red");
								}else{
									$(".username-msg").text("用户名可用");
									$(".username-msg").removeClass("red");
									$(".username-msg").addClass("green");
								}
							}
						);
				});
			});
			
			//重复密码验证(不需要ajax请求)
			$("#repeat-password").on("blur",function(){
				testPassword();
			});
			
			//修改手机号
			$("#change-phone").click(function(){
				$("#change-phone").removeAttr("href");
				$("#phone-number").removeClass("input-text-new");
				$("#phone-number").removeAttr("readonly");
				$("#change-phone").addClass("hide");
				$(".phone-msg").removeClass("hide");
				var oldPhone = $("#old-phone-number").val();
				
				//ajax验证手机号是否存在以及是否规范
				$("#phone-number").on("blur",function(){
					var phone = $(this).val();
					var oldPhone = $("#old-phone-number").val();
					var regex = /^1\d{10}$/;
					//正则验证
					if(!regex.test(phone)){
						$(".phone-msg").text("请输入11位手机号");
						$(".phone-msg").removeClass("green");
						$(".phone-msg").addClass("red");
						return;
					}
					
					if(phone==oldPhone){
						$("#old-phone-number").attr("name","userPhone");
					}else{
						$("#phone-number").attr("name","userPhone");
					}
					
					//ajax请求
					$.post(
						"/user/verphone",
						{"phone":phone},
						function(data){
							if(data=="success"){
								$(".phone-msg").text("手机号已被占用");
								$(".phone-msg").removeClass("green");
								$(".phone-msg").addClass("red");
							}else{
								$(".phone-msg").text("手机号可用");
								$(".phone-msg").removeClass("red");
								$(".phone-msg").addClass("green");
							}
						}
					);
				});
			});
			
			
			//年龄合法性验证
			$("#age").on("blur",function(){
				var age = $(this).val();

				if(age>0 && age<121){
					$("#age-msg").text("");
					$("#age-msg").removeClass("red");
					$("#age-msg").addClass("green");
				}else{
					$("#age-msg").text("年龄必须在1-120岁之间");
					$("#age-msg").removeClass("green");
					$("#age-msg").addClass("red");
				}
			});
			
			//提交修改信息
			$("#btn-submit").click(function(){
				//判断密码是否改变
				var password = $("#user-password").val();
				
				if(testPassword()){
					if(password!=""){
						$("#user-password").attr("name","userPassword");
						$(".user-form").attr("action","/user/md5info");
						$(".user-form").submit();
					}else{
						$("#old-password").attr("name","userPassword");
						$(".user-form").attr("action","/user/updateinfo");
						$(".user-form").submit();
					}
				}
			});
			
			//验证密码
			function testPassword(){
				var flag = true;
				var password = $("#user-password").val();
				var repeat = $("#repeat-password").val();
				
				if(repeat!=password){
					$(".repeat-msg").text("密码不一致");
					$(".repeat-msg").removeClass("green");
					$(".repeat-msg").addClass("red");
					flag = false;
					return flag;
				}else{
					$(".repeat-msg").text("");
					$(".repeat-msg").removeClass("red");
					$(".repeat-msg").addClass("green");
					flag = true;
					return flag;
				}
			}
			
		});
	</script>
	
</head>
<body>
		<!-- 顶部导航 end -->

		<!-- 头部 start -->
		<div class="header w1210 bc mt15">
			<!-- 头部上半部分 start 包括 logo、搜索、用户中心和购物车结算 -->
			<div class="logo w1210">
				<h1 class="fl" >
					<a href="/user/loginreg/index">
						<img src="http://localhost:8083/fileserver/logo/logo.jpg" style="height: 70px; width: 150px;">
					</a>
				</h1>
			</div>
			<!-- 头部上半部分 end -->

			<div class="clear"></div>

			<!-- 导航条部分 start -->
			<div class="nav w1210 bc mt10">
				<div class="navitems fl">
					<ul class="fl">
						<li class="current">
							<a href="/user/loginreg/index">首页</a>
						</li>
						<li>
							<a href="/product/fytype">商品大全</a>
						</li>
						<li>
							<a href="/product/showtype?tid=1">手机频道</a>
						</li>
						<li>
							<a href="/product/showtype?tid=2">数码产品</a>
						</li>
						<li>
							<a href="/product/showtype?tid=3">家用电器</a>
						</li>
						<li>
							<a href="/product/showtype?tid=5">衣装服饰</a>
						</li>
						<li>
							<a href="/product/showtype?tid=7">电子图书</a>
						</li>
					</ul>
					<div class="right_corner" style="float:right;">
						<a href="/shopcar/show">购物车</a>
					</div>
				</div>
			</div>
			<!-- 导航条部分 end -->
		</div>
		<!-- 头部 end-->

		<div class="clear"></div>

		<!-- 页面主体 start -->
		<div class="main w1210 bc mt10">
			<div class="crumb w1210">
				<h2>
					<strong><a href="/user/userinfo">个人中心</a></strong>
					<span>></span>
					<span>修改信息 </span>
				</h2>
			</div>

			<!-- 左侧导航菜单 start -->
			<div class="menu fl">
				<h3><a href="/user/userinfo">个人中心</a></h3>
				<div class="menu_wrap">
					<dl>
						<dt>订单中心</dt>
						<dd>&nbsp;&nbsp;
							<a href="/order/show">我的订单</a>
						</dd>
						<dd>&nbsp;&nbsp;
							<a href="/user/mycollect">我的收藏</a>
						</dd>
					</dl>
					<dl>
						<dt>账户中心</dt>
						<dd class="cur">&nbsp;&nbsp;
							<a href="/user/userinfo">个人信息</a>
						</dd>
						<dd>&nbsp;&nbsp;
							<a href="/user/showaddress">收货地址</a>
						</dd>
					</dl>
					<dl>
						<dt>个人卖家</dt>
						<dd>&nbsp;&nbsp;
							<a href="/systemer/usertjsp">个人卖家中心</a>
						</dd>
					</dl>
				</div>
			</div>
			<!-- 左侧导航菜单 end -->

			<!-- 右侧内容区域 start -->
			<div class="content fl ml10">
				<div class="user_hd">
						<h3>修改信息</h3>
				</div>
				
				<div class="user_bd mt10">
					<div class="div-class">
						<div class="form">
							<form class="user-form" action="" method="post">
								<div class="item">
									<span class="label">
										<em>*</em>
										用户名：
									</span>
									<div class="float-left">
										<input id="username" class="input-text input-text-new" name="userName" type="text" value="${user.userName}" readonly="readonly" />
										<span class="username-msg hide">用户名只能用小、大写字母以及数字</span>
										<a id="change-username" href="">修改</a>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">新密码：</span>
									<div class="float-left">
										<input id="old-password" type="hidden" value="${user.userPassword}"/>
										<input id="user-password" class="input-text" type="password" />
										<span class="password-msg"></span>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">重复密码：</span>
									<div class="float-left">
										<input id="repeat-password" class="input-text" type="password" />
										<span class="repeat-msg"></span>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">身份证号码：</span>
									<div class="float-left">
										<input type="hidden" name="userId" value="${user.userId}" />
										<input id="id-number" class="input-text" value="${user.userId}" readonly="readonly" />
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">
										<em>*</em>
										手机号码：
									</span>
									<div class="float-left">
										<input id="phone-number" class="input-text input-text-new" type="text" readonly="readonly" />
										<input id="old-phone-number" class="input-text input-text-new" type="hidden" value="${user.userPhone}"/>
										<span class="phone-msg hide"></span>
										<a id="change-phone" href="">修改</a>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">年龄：</span>
									<div class="float-left age-info">
										<input id="age" class="selt selt1" name="userAge" value="${user.userAge}" />
										<label class="ml5 mr5" >岁</label>
										<span id="age-msg">年龄介于1至120岁</span>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">性别：</span>
									<div class="float-left">
										<c:if test="${user.userGender==null}">
											<input class="jbrd" type="radio" name="userGender" value="男" />男&nbsp;&nbsp;
											<input class="jbrd" type="radio" name="userGender" value="女" />女&nbsp;&nbsp;
											<input class="jbrd" type="radio" name="userGender" value="保密" />保密&nbsp;&nbsp;
										</c:if>
										<c:if test="${user.userGender=='男'}">
											<input class="jbrd" type="radio" name="userGender" value="男" checked="checked" />男&nbsp;&nbsp;
											<input class="jbrd" type="radio" name="userGender" value="女" />女&nbsp;&nbsp;
											<input class="jbrd" type="radio" name="userGender" value="保密" />保密&nbsp;&nbsp;
										</c:if>
										<c:if test="${user.userGender=='女'}">
											<input class="jbrd" type="radio" name="userGender" value="男" />男&nbsp;&nbsp;
											<input class="jbrd" type="radio" name="userGender" value="女" checked="checked" />女&nbsp;&nbsp;
											<input class="jbrd" type="radio" name="userGender" value="保密" />保密&nbsp;&nbsp;
										</c:if>
										<c:if test="${user.userGender=='保密'}">
											<input class="jbrd" type="radio" name="userGender" value="男" />男&nbsp;&nbsp;
											<input class="jbrd" type="radio" name="userGender" value="女" />女&nbsp;&nbsp;
											<input class="jbrd" type="radio" name="userGender" value="保密" checked="checked" />保密&nbsp;&nbsp;
										</c:if>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">密保问题：</span>
									<div class="float-left">
										<select id="question" name="userQuestion" class="selt selt2">
											<option value="">请选择(若无选择默认设置无密保)</option>
											<option value="请问您高中班主任的名字是？">请问您高中班主任的名字是？</option>
											<option value="请问您母亲的名字是？">请问您母亲的名字是？</option>
											<option value="请问您父亲的名字是？">请问您父亲的名字是？</option>
											<option value="请问您最喜欢的电影名字是？">请问您最喜欢的电影名字是？</option>
											<option value="请问您最喜欢的明星名字是？">请问您最喜欢的明星名字是？</option>
											<option value="请问您的住址是？">请问您的住址是？</option>
											<option value="请问您爱人的名字是？">请问您爱人的名字是？</option>
										</select>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">密保答案：</span>
									<div class="float-left">
										<input class="input-text text2" name="userAnswer" placeholder="请输入您要填写的答案"/>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">&nbsp;</span>
									<div class="float-left">
										<a id="btn-submit" >提交</a>
									</div>
								</div>
							</form>
						</div>
					</div>
					<div id="user-info">
						<div class="user-img">
							<img alt="用户头像" src="" />
						</div>
						<div class="user-info-more">
							<div class="info-div"><b>用户名：${user.userName}</b></div>
							<div class="info-div">会员类型：
								<c:choose>
									<c:when test="${user.userPart==1}">
										个人用户
									</c:when>	
									<c:otherwise>
										商家
									</c:otherwise>
								</c:choose>
							</div>
						</div>
					</div>
					<div class="clear" ></div>
				</div>
			</div>
			<!-- 右侧内容区域 end -->
		</div>
		<!-- 页面主体 end-->

		<div class="clear"></div>
		
		<!-- 底部版权 start -->
		<div class="footer w1210 bc mt10">
			<div class="mt20">Joinlabs商城|JYUI|聊|多看书城|JY路由器|视频电话|JY天猫店|JY淘宝直营店|JY网盟|JY移动|隐私政策|Select Region</div>
			<div>©JY.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
		</div>
		<!-- 底部版权 end -->
	</body>
</html>